<%@ Page Language="C#" MasterPageFile="doc.master" Title="Modul Picasa" %> <%@ Register TagPrefix="mod" TagName="inline" Src="/Mod/Mod_Inline.ascx" %> <asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1"> <h1>Gallerien, Alben und Bilder aus Picasa einbetten</h1> <p> </p> <p>Einbindung von Picasa Bildergalerien im eigenen Web </p> <p> Bildergalerien in der Cloud sind sehr praktisch. Und für Private geht es um's liebe Geld. Viel können sollen sie und nichts kosten sollen sie. Ich kenne Flickr und Picasa. Flickr ist sehr gut, ein Muss für Foto-Profis. Picasa ist eher etwas für fortgeschrittene Amateure. Beide Bildergalerien sind kostenlos - wenn man nicht zu viel von ihnen verlangt. Und das "zu viel" ist immer der Speicherplatz. </p> <p> Die wesentliche Unterschied zwischen beiden:<br /> F P + - verschachtelte Ordner<br /> - + Clientanwendung<br /> 1TB 5GB Zahlgrenze </p> <p> Hier geht es um das Einbetten von Bildern in der eigenen Webseite. Dazu muss die Bildergalerie einen RSS-Feed anbieten. Grundsätzlich bieten das beide Galerien an, doch gibt es bei Flickr keine Möglichkeit, ein Album anzugeben. Daher wurde Flickr für diese Anwendung einmal beiseite gelassen. </p> <h2>Picasa</h2> <p> Picasa ist ein kostenloses Bildverwaltungsprogramm für den Desktop. Eine der Eigenschaften von Picasa ist aber die Möglichkeit, diese Bilder auch im Internet zu publizieren. Dazu bietet Picasa zwei Möglichkeiten an: </p> <h3>Publikation von Ordnern im HTML-Format</h3> <p> Dabei entstehen in einem wählbaren Ordner für alle Bilder Miniaturansichten und Vorschaubilder definierbarer Größe in einem wählbaren Design. Diese exportierte Inhalte kopiert man auf den eigenen Webspace und die Bildergalerie ist fertig. Dieses Verfahren ist praktisch, wenn sich die Inhalte der publizierten Bilder nicht verändern. Wenn aber zu einer solchen Sammlung Bilder dazukommen oder wenn maan Bilder bearbeitet, dann muss man diese Arbeitsschritte wiederholen. </p> <h3>Publikation auf PicasaWeb</h3> <p> PicasaWeb ist die Partner-Anwendung von Picasa. PicasaWeb ist in Picasa integriert. Man kann jeden Ordner am Desktop mit einem Klick m Web publizieren und auch den Auftrag geben, zwischen dem Zustand des Ordners am PC und der jeweiligen Webversion Synchronität einzustellen. Wenn man also ein Bild löscht, hinzufügt oder bearbeitet, dann wird die Webversion automatisch korrigiert. Ohne weitere Handarbeit. Das kann sich sehen lassen! </p> <p> Leider ist die Abbildung der Desktop-Ordner (oder Picasa-Alben) in der Cloud nicht ganz perfekt. In der Cloud sind die Ordner (Alben) immer gleichranging (nebeneinander) angeordnet auch wenn es sich am Desktop um eine Hierarchie gehandelt hat. Es gibt daher keine Verschachtelung von Ordnern. Nach meiner Ansicht handelt es sich dabei um eine bewusste Beschränkung denn wenn einmal mehr als Tausend Ordner angelegt sind, kann es leicht unübersichtlich werden und das Wachstum des Archivs wird auf diese Weise geschickt beschränkt. </p> <p> Man hat bei PicasaWeb beliebig viel Speicherplatz (vorausgesetzt, die Bilder überschreiten nicht 2048 Pixel) und darum kümmert sich bereits die Desktop-Version von Picasa. Man muss die Bilder nicht verkleinern, das macht alles der Client. </p> <p> Man hat einen extrem schnellen Zugriff auf die Bilder, man kann die Sichtbarkeit der Bilder auf privat, geschützt oder öffentlich einstellen oder auch nur einer Person allein zugänglich machen. Man kann die Bilder geotaggen, mit Tags versehen uvam. </p> <p> Leider sind aber Bildergalerie und die eigene Homepage oder das eigenen Blog zwei unterschiedliche Anwendungen und es wäre hübsch, könnte man die Bilder aus der Cloud auch im Rahmen der eigenen Homepage publizieren. Verlinken einzelner Bilder ist ohnehin kein Problem aber wenn man ganze Alben im Web zeigen möchte, noch dazu solche deren Inhalt nicht gleich bleibt, hat das händische Verlinken seine Grenzen. </p> <p> Und für diese Einbettung ist die RSS-Technologie bestens geeignet. Sie ist bei Google vorbildlich implementiert, bei Yahoo sind die RSS-Feeds nicht so gut programmiert. </p> <p> Es gibt drei Darstellungformen im Picasa-Web:<br /> 1. Das Picasa-Web: gezeigt werden alle verfügbaren Alben mit einem quadratischen Bild als Stellvertreter. Das quadratische Vorschaubild ist anklickbar und zeigt dann die Bilder des Albums.<br /> 2. Das Picasa-Album: Gezeigt werden alle Bilder des Albums in wählbarer Vorschaugröße. Die Bilder sind anklickbar und zeigen dann das Bild in größerer Auflösung.<br /> 3. Das einzelne Bild. Man kann das Bild noch Zoomen (je nachdem, welche Auflösung man beim Upload eingestellt hat und man kann auch eine Diashow ablaufen lassen. </p> <p> Sowohl bei der Web-Darstellung als auch beim Album findet man im rechten Kommentarbereich einen RSS-Link. Dieser Link ermöglicht die Einbettung der Vorschaubilder des Webs oder der Bilder eines Albums in fremden Anwendungen. </p> <p>Bis das aber funktioniert, muss man etwas Entwciklungsarbeit investeren. </p> <p> Wenn man diesen RSS-Link anklickt, ist man enttäuscht, denn man sieht - so wie das auch der RSS-Reader sehen würde - den Inhalt einer XML-Datei mit Angaben zu dem Web oder zu dem Album. Weiters sieht man in der Adresszeile den Link dazu und diese Links analysieren wir hier einmal: </p> <p> Als Beispiel verwendet ich meine Rapid-Bilder der Saison 2012/13. Die sind öffentlich, jeder kann sie sehen. </p> <p> Die Adresse ist<br /> <asp:HyperLink ID="HyperLink2" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://picasaweb.google.com/rapidfranz"></asp:HyperLink> http://picasaweb.google.com/rapidfranz <br /> Gibt man diese Adresse im Browser ein, sieht man einerseits alle Alben und anderseite ändert sich die Adresszeile in:<br /> <asp:HyperLink ID="HyperLink1" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="https://picasaweb.google.com/103374753388611853315"></asp:HyperLink> https://picasaweb.google.com/103374753388611853315 </p> <p> Der Grund ist, dass dieser User "rapidfanz" auch als Google+-User bekannt ist und die Alben aus PicasaWeb in Google+-Alben umgewandelt worden sind. Und in Google+ sind die User nur "Nummern". Es gilt daher: <br /> rapidfranz und 103374753388611853315 können alternativ verwendet werden. </p> <p> Der Rss-Link für diese "Galerie von Franz Fiala" ist<br /> <asp:HyperLink ID="HyperLink3" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="https://picasaweb.google.com/data/feed/base/user/103374753388611853315?alt=rss&kind=album&hl=de&access=public&imgmax=1600"></asp:HyperLink> https://picasaweb.google.com/data/feed/base/user/103374753388611853315?alt=rss&kind=album&hl=de&access=public&imgmax=1600<br /> Abgesehen von anderen Details sieht man durch /user/103374753388611853315, dass das Album eines besteimmten Users angesprochen wird. </p> <p> Klickt man nur irgendeines der Alben an, zum Beispiel "2013-05-26 Kulovits Abschied, sieht man in der Adresszeile<br /> <asp:HyperLink ID="HyperLink4" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="https://picasaweb.google.com/103374753388611853315"></asp:HyperLink> https://picasaweb.google.com/103374753388611853315 https://picasaweb.google.com/103374753388611853315/20130526KulovitsAbschied?noredirect=1<br /> Die Adresse des RSS-Links ist:<br /> <asp:HyperLink ID="HyperLink5" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="https://picasaweb.google.com/103374753388611853315"></asp:HyperLink> https://picasaweb.google.com/103374753388611853315 https://picasaweb.google.com/data/feed/base/user/103374753388611853315/albumid/5884594875845390017?alt=rss&kind=photo&hl=de<br /> Die Kommandozeile wird um /albumid/588459487584539001 erweitert, das ist offenbar die ID des Albums. </p> <p> Klickt man nun auf ein Bild, sieht man in der Adresszeile:<br /> <asp:HyperLink ID="HyperLink6" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="https://picasaweb.google.com/103374753388611853315"></asp:HyperLink> https://picasaweb.google.com/103374753388611853315 https://picasaweb.google.com/103374753388611853315/20130526KulovitsAbschied?noredirect=1#5884594908557438002<br /> Die abschließende Zahl #5884594908557438002 ist offenbar die Bildnummer. </p> <p> Obwohl beim Einzelbild kein RSS-Link angegeben ist, kann man der API-Dokumentation entnehmen, dass auch hier der Kommentar und die Tags zu einem Bild per RSS angeholt werden können. </p> <p> Abrufen Web Album Bild<br /> UserId + + +<br /> AlbumId + +<br /> PhotoId + </p> <p> Es ist naheliegend, dass beim einzelnen Bild kein RSS-Link angezeigt wird, denn auf ein einzelnes Bild kann man ohnehin direkt verlinken. Aber in dem RSS-Feed sind auch die Bildbeschreibung, die Tags, der Autor, das Datum und andere Informationen enthalten, die bei einfachen Verlinken verloren gehen. </p> <p> Die einfachste Anwendung ist das Einbetten der Miniaturbilder eines Albums auf PicasaWeb im eigenen Web. Als Technologie wird ASP-NET verwedent. </p> <p> Man braucht dazu: <br /> - die UserId<br /> - die AlbumId </p> <p> Das folgende Beispielprogramm ist mit Absicht so einfach wie möglich gehalten. </p> <p> Um die Inahlte eines RSS-Feed auf einer Websteie anzeigen zu können, benötigt man ein Style-Sheet, in dem festgehalten wird, welche Felder eines Bildes in welcher Darstellungsart verwendet werden.<br /> Die Zauberformel lautet: <br /> Browserkode = Daten + Darstellungsvorschrift<br /> html = xml + xsl </p> <p> Das ganze Projekt besteht aus drei Dateien:<br /> picasawebalbum.ascx<br /> picasawebalbum.xsl<br /> picasawebalbum.aspx </p> <p> picasawebalbum.ascx<br /> Dieses Benutzersteuerelement holt den Feed vom Server und verbindet ihn mit der Darstellungsvorschfit und gibt den Html-Kode aus. Es bekommt dazu zwei Parameter user und album von jener Seiten, die dieses Modul implementiert. Wenn die Parameter nicht angegeben werden, werden die Bilder von User "RapidFranz" und dem Album "2. Rapid-Lauf" angezeigt. </p> <p> Das Modul, in dem xml-Daten und xsl-Format zusammengefügt werden, heißt asp:xml. Diese Websteuerelement hat zwei Parameter, einen für die Daten und einen für das Format. Während der xsl-Kode tatsächlich als Datei picasawebalbum.xsl vorliegt, kommt die xsl-Datei vom RSS-Feed von picasaweb.google.com. Daher muss in einem ersten Schrtt diese Adresse angesprochen werden und der vom Server kommende Streaam in einen String verwandelt werden, des als Input für das Websteuerelement asp:xsl dient. </p> <p> Eine einzige Zeile erledigt diesen komplexen Vorgang:<br /> <asp:Xml ID="Xml1" DocumentContent="" runat="server" TransformSource="picasawebalbum.xsl"></asp:Xml> </p> <p> picasawebalbum.xsl<br /> Aus der RSS-Feed werden die Felder title, link und title verwendet. </p> <p> picasawebalbum.aspx<br /> Diese Datei wird am Server aufgerufen. Hier werden die Kommandozeilen-Parameter user und album ausgewertet und wenn sie übergeben worden sind, an picasawebalbum.ascx weitergegeben. </p> <p> picasawebalbum.htm<br /> Jetzt geht es darum, in einer beliebigen HTML-. PHP- oder ASPX-Seite die Bilder anzuzeigen. Wer mit Expression Web arbeitet, kann den Code aus picasawebalbum.aspx in seiner Datei einsetzen. der Vorteil ist, dass die Bilder ein einer div eingefügt werden. </p> <p> Wenn man dagegen eine andere Technologie verwendet (HTML oder PHP), dann muss man die Seite picasawebalbum.aspx in einem iFrame aufrufen. Beispielhaft wird das in der Datei picasawebalbum.htm gezeigt. Es genügt eine einzige Zeile:<br /> <iframe src="picasawebalbum.aspx" width="300" height="300"></iframe> </p> <p> Wenn man eine anderes als das voreingestellte Album zeigen möchte, schaut das dann so aus:<br /> <iframe src="picasawebalbum.aspx?album=5884597230337299185" width="300" height="300"></iframe> </p> <p> Noch eine Schwierigkeit gibt es für PHP-User für den Fall, dass ihr Server kein Microsoft-Server ist, denn dann können sie die Datei picasawebalbum.aspx nicht auf dem eigenen Server ausführen. Auch für diesen Fall ist gesorgt.<br /> Normalerweise müsste man für die Datei picasawebalbum.aspx einen Microsoft-Server benutzen, doch geht es auch ohne. Man muss lediglich den Speicherort der Datei angeben:<br /> <iframe src="http://www.clubcomputer.at/picasawebalbum.aspx" width="300" height="300"></iframe> </p> <p></p> <p>Literatur </p> <p> Sammlung von xsl-Dateien für verschiedenste RSS-Quellen<br /> <asp:HyperLink ID="HyperLink7" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://pordl.com/"></asp:HyperLink> http://pordl.com/ </p> <p> Sammlung von xsl-Beispielen für PicasaWeb<br /> <asp:HyperLink ID="HyperLink8" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://pordl.com/bySite.aspx?site=picasaweb.com"></asp:HyperLink> http://pordl.com/bySite.aspx?site=picasaweb.com </p> <p> Referenz der Kommandozeilen-Parameter von PicasaWeb<br /> <asp:HyperLink ID="HyperLink9" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="https://developers.google.com/picasa-web/docs/2.0/reference?hl=de#Kind"></asp:HyperLink> https://developers.google.com/picasa-web/docs/2.0/reference?hl=de#Kind </p> <p> Anzeige eines RSS-Feed auf der eigenen Seite<br /> <asp:HyperLink ID="HyperLink10" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://stackoverflow.com/questions/6304285/how-to-display-rss-feed-of-other-website-to-my-site-in-asp-net"></asp:HyperLink> http://stackoverflow.com/questions/6304285/how-to-display-rss-feed-of-other-website-to-my-site-in-asp-net </p> <p> Parse eines RSS-Feed<br /> <asp:HyperLink ID="HyperLink11" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://stackoverflow.com/questions/6920024/parse-rss-feed-using-asp-net-c-sharp"></asp:HyperLink> http://stackoverflow.com/questions/6920024/parse-rss-feed-using-asp-net-c-sharp </p> <p> Anzeige einzelner Elemente aus einem RSS-Feed<br /> <asp:HyperLink ID="HyperLink12" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.codeguru.com/csharp/csharp/cs_network/internetweb/article.php/c10985/Displaying-RSS-Items-with-C-and-ASPNET.htm"></asp:HyperLink> http://www.codeguru.com/csharp/csharp/cs_network/internetweb/article.php/c10985/Displaying-RSS-Items-with-C-and-ASPNET.htm </p> <p> Consume RSS-Feed with ASP.NET C# (woher kommt XmlHelper?)<br /> <asp:HyperLink ID="HyperLink13" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.roundedworks.com/notebook/c-asp-net/consume-a-rss-feed-with-asp-net-c/"></asp:HyperLink> http://www.roundedworks.com/notebook/c-asp-net/consume-a-rss-feed-with-asp-net-c/ </p> <p> Modifikation von XML-Inhalten<br /> <asp:HyperLink ID="HyperLink14" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://stackoverflow.com/questions/2551307/modify-xml-existing-content-in-c-sharp"></asp:HyperLink> http://stackoverflow.com/questions/2551307/modify-xml-existing-content-in-c-sharp </p> <p> Add Node to XML-File<br /> <asp:HyperLink ID="HyperLink15" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://social.msdn.microsoft.com/forums/en-US/csharpgeneral/thread/e3f3c6b1-43ee-46d7-bc09-edb8dcedb8d1"></asp:HyperLink> http://social.msdn.microsoft.com/forums/en-US/csharpgeneral/thread/e3f3c6b1-43ee-46d7-bc09-edb8dcedb8d1 </p> <p> Reading and Writing XML in C#<br /> <asp:HyperLink ID="HyperLink16" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.c-sharpcorner.com/UploadFile/mahesh/ReadWriteXMLTutMellli2111282005041517AM/ReadWriteXMLTutMellli21.aspx"></asp:HyperLink> http://www.c-sharpcorner.com/UploadFile/mahesh/ReadWriteXMLTutMellli2111282005041517AM/ReadWriteXMLTutMellli21.aspx </p> <p> Das Ändern und Speichern von XML mit der XmlDocument-Klasse in.NET Framework-SDK<br /> <asp:HyperLink ID="HyperLink17" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://support.microsoft.com/kb/301233/de"></asp:HyperLink> http://support.microsoft.com/kb/301233/de </p> <p> Edit xml file with C#<br /> <asp:HyperLink ID="HyperLink18" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/5702a7c7-fdfe-42ed-9329-ec8f3f975979/"></asp:HyperLink> http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/5702a7c7-fdfe-42ed-9329-ec8f3f975979/ </p> <p> How to modify exiting XML file with XmlDocument and XmlNode in C#<br /> <asp:HyperLink ID="HyperLink19" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://stackoverflow.com/questions/2558787/how-to-modify-exiting-xml-file-with-xmldocument-and-xmlnode-in-c-sharp"></asp:HyperLink> http://stackoverflow.com/questions/2558787/how-to-modify-exiting-xml-file-with-xmldocument-and-xmlnode-in-c-sharp </p> <p> Tip: Make choices at runtime with XSLT parameters<br /> <asp:HyperLink ID="HyperLink20" cssclass="externallink" runat="server" Target="_blank" NavigateUrl="http://www.ibm.com/developerworks/library/x-tipxsltrun/index.html"></asp:HyperLink> http://www.ibm.com/developerworks/library/x-tipxsltrun/index.html<br /> </p> </asp:Content>